<template>
  <div class="check">
    <Card shadow>
      <p slot="title">基本信息</p>
      <i-form :model="formItem">
        <Form-item>
          <Row >
            <i-col style="margin:0 2%;" v-for="(item,index ) in newsList" :key="index" span="11"  >
              <template v-if="index === 2">
                <div style="display: flex;">
                  <div class="ivu-input-group-prepend radioPart">
                    <span>{{item.lable}}</span>
                  </div>
                  <RadioGroup v-model="formItem.radio">
                    <Radio disabled label="on">
                      <span>启用</span>
                    </Radio>
                    <Radio disabled label="off">
                      <span>停止</span>
                    </Radio>
                  </RadioGroup>
                </div>
              </template>
              <template v-else>
                <i-input  readonly style="margin-bottom: 15px;" v-model="item.value">
                  <span class="lable-name" slot="prepend">{{item.lable}}</span>
                </i-input>
              </template>
            </i-col>
          </Row>
        </Form-item>
      </i-form>
    </Card>
    <Card shadow>
      <p slot="title">开户信息</p>
      <i-form :model="formItem">
        <Form-item>
          <Row >
            <i-col style="margin:0 2%;" v-for="(item,index ) in usersList" :key="index" span="11" >
                <i-input  readonly style="margin-bottom: 15px;" v-model="item.value">
                  <span  slot="prepend">{{item.lable}}</span>
                </i-input>
            </i-col>
          </Row>
        </Form-item>
      </i-form>
    </Card>
    <Card shadow>
      <p slot="title">账户信息</p>
      <i-form :model="formItem">
        <Form-item>
          <Row >
            <i-col style="margin:0 2%;" v-for="(item,index ) in accountList" :key="index" span="11" >
                <i-input  readonly style="margin-bottom: 15px;" v-model="item.value">
                  <span slot="prepend">{{item.lable}}</span>
                </i-input>
            </i-col>
          </Row>
          <Row >
            <i-col style="margin:0 2%;" v-for="(item,index ) in radioList" :key="index" span="11" >
                <i-input  readonly style="margin-bottom: 15px;" v-model="item.value">
                  <span  slot="prepend">{{item.lable}}</span>
                </i-input>
            </i-col>
          </Row>
        </Form-item>
      </i-form>
     <i-button  style="margin-left: 100px;" class="com-btm" @click="comback()">返回</i-button>
    </Card>

  </div>
</template>

<script>
  export default {
    name: 'check_view_page',
    data() {
      return {
        formItem: {
          radio: 'on',
        },
        newsList: [{
            lable: '商户ID',
            value: '2000032'
          },
          {
            lable: '商户名称',
            value: '测试'
          },
          {
            lable: '商户状态',
            value: ''
          },
          {
            lable: '所属代理商ID',
            value: '2'
          },
          {
            lable: '用户登录名',
            value: ''
          },
          {
            lable: '真实姓名',
            value: ''
          },
          {
            lable: '身份证号',
            value: ''
          },
          {
            lable: '手机号',
            value: ''
          },
          {
            lable: 'QQ号',
            value: ''
          },
          {
            lable: '邮箱',
            value: ''
          },
          {
            lable: '网站名称',
            value: ''
          },
          {
            lable: '网站地址',
            value: ''
          },
          {
            lable: '通讯地址',
            value: ''
          },
          {
            lable: '唯一标识',
            value: ''
          },
          {
            lable: '线下充值费率(%)',
            value: '3'
          },
          {
            lable: '创建时间',
            value: '2020-09-29 23:06:49'
          },
        ],
        usersList: [{
            lable: '开户行名称',
            value: ''
          },
          {
            lable: '开户网点名称',
            value: ''
          },
          {
            lable: '帐户名',
            value: ''
          },
          {
            lable: '账户号',
            value: ''
          },
          {
            lable: '开户所在省',
            value: ''
          },
          {
            lable: '开户所在市',
            value: ''
          }
        ],
        accountList:[{
          lable: '账户余额(元)',
          value: '0'
        },{
          lable: '不可用余额(元)',
          value: '0'
        },{
          lable: '可结算余额(元)',
          value: '0'
        }
        ],
        radioList:[{
          lable: '保证金(元)',
          value: '0'
        },{
          lable: '冻结金额(元)',
          value: '0'
        },{
          lable: '代付金额(元)',
          value: '106204.45'
        },{
          lable: '不可用代付金额(元)',
          value: '0'
        }],
      }
    },
    methods:{
      comback(){
        this.$router.push({
          name:'merchant_list_page'
        })
      }
    }
  }
</script>

<style lang="less">
  .ivu-input:hover,
  .ivu-input:active,
  .ivu-input:focus {
    border-color: #c2c3c6 !important;
    box-shadow: none;
  }

  .radioPart {
    height: 36px;
    line-height: 28px;
    font-size: 14px;
    border-right: 1px solid #ddd;
    margin-right: 10px;
  }
  .check .ivu-input-group-prepend{
     width: 32%!important;
  }
</style>
